<template>
   <div class="App">
    <div class="home-panel">
          <div class="commonwidth" ref="new">
           <div class="fresh">
               <h3>新鲜好物<span>新鲜出炉 品质靠谱</span></h3>
           </div>
           <div class="commoditybaby">
              <ul class="goods-list">
                <li v-for="(item,index) in brandBox" :key="index">
                 <div class="come">
                    <img :src="item.picture" alt="">
                  <p class="nameEllipsis">{{item.name}}</p>
                  <p class="price">{{ item.price}}</p>
                 </div>
                </li>
              </ul>           
           </div>
          </div>        
    </div>
   <div class="home-panel">
    <div class="commonwidth" ref="hot">
           <div class="fresh">
               <h3>人气推荐<span>人气爆款 不容错过</span></h3>
           </div>
           <div class="commoditybaby1">
              <ul class="goods-list">
                <li v-for="(item,index) in recommend" :key="index">
                 <div class="come">
                    <img :src="item.picture" alt="">
                  <p class="nameEllipsis">{{item.title}}</p>
                  <p class="desc">{{ item.alt}}</p>
                 </div>
                </li>
              </ul>           
           </div>
          </div>
   </div>
   <div class="home-paneL">
         <div class="commonwidth" ref="brand">
            <div class="fresh">
               <h3>热门品牌<span>国际经典 品质保证</span></h3>
           </div>
              <div class="swiper-com">
        
                <div class="swiper box">
    <div class="swiper-wrapper list">
        <div class="swiper-slide" v-for="(item,index) in PopularBrands" :key="index">
            <img :src='item.picture' alt="">
        </div>
        
    </div>
    <!-- 如果需要分页器 -->
    <!-- <div class="swiper-pagination"></div> -->
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"></div> -->
</div>
              </div>
         </div>
   </div>
   <div class="home-product" >
    <div class="Home commonwidth" ref="Home" v-for="item,index in Home" :key="index">
         <div class="head">
          <h3>{{ item.name }}</h3>
         
          <div class="sub">
                 <ul>
                    <li v-for="i,index in item.children " :key="index">{{ i.name }}</li>
                    
                 </ul>
          </div>
         </div>
         <div class="goodsbox" >
           <!-- <ul class="goodsboxUl"> 
         <li > -->
                <div class="imgs">
                     <img :src="item.picture" alt="">
                     <div class="som">
                          <span class="som1">{{ item.name }}馆</span>
                          <span class="som2">{{item.saleInfo }}</span>
                     </div>
                </div>
                    <ul class="goods-lisT">
                        <li class="goods-li" v-for="items,index in item.goods" :key="index">
                         
                          <div class="coment">
                              <div class="image">
                                     <img :src="items.picture" alt="">
                              </div>
                                 <div class="namebox">
                                    <p class="name">{{ items.name }}</p>
                                 <p class="ellipsis">{{items.desc }}</p>
                                 <p class="prices">{{ items.price }}</p>
                                 </div>
                          </div>
                        </li>
                    </ul>
            <!-- </li>
           </ul> -->
         </div>
</div>
   </div>
     <div class="home-footer">
            <div class="commonwidth">
         <div class="head-footer">
               <h3>最新专题
            
               </h3>
               <span>查看全部</span>
       </div>
       <div class="footerBox">
           <ul>
            <li class="special-item" v-for="item,index in specialSubject" :key="index">
             <div class="src">
                <img :src="item.detailsUrl" alt="">
             </div>
             <div class="meta">
                <p class="title">
                    <span class="top">{{ item.title }}</span>
                    <span class="subellipsis-top">{{item.summary}}</span>
                </p>
                <span class="pricebaanr">￥{{item.lowestPrice}}起</span>
             </div>
             <div class="foot">
                 <span class="like">{{item.collectNum}}</span>
                 <span class="view">{{item.viewNum}}</span>
                 <span class="reply">{{item.replyNum}}</span>
             </div>
            </li>
           </ul>
       </div>
            </div>
     </div>
    </div> 
    
</template>
<script>
import {getElementTop} from '@/tools/tools'
import axios from 'axios';
export default {
    data(){
        return{
            brandBox:[],//新鲜好物
            recommend:[],//人气推荐
            PopularBrands:[],//热门品牌
            Home:[],//产品区块
            specialSubject:[],//最新专题
            hotbool:true,
            brandbool:true,
            Homebool:true,
            newbool:true


        }
    },
    mounted(){
        axios   //新鲜好物
         .get('http://pcapi-xiaotuxian-front-devtest.itheima.net/home/new')
         .then((res)=>{
                //  console.log(res);
                 if(res.data.msg=='操作成功'){
                    this.brandBox=res.data.result
                    // console.log(this.brandBox);
                 }
         })
    

        // window.addEventListener('scroll',this.scrollGood)
       
        axios   //人气推荐
         .get('http://pcapi-xiaotuxian-front-devtest.itheima.net/home/hot')
         .then((res)=>{
                //  console.log(res);
                 if(res.data.msg=='操作成功'){
                    this.recommend=res.data.result
                    // console.log(this.recommend);
                 }
         })
         
      
         axios //热门品牌
         .get('http://pcapi-xiaotuxian-front-devtest.itheima.net/home/brand?limit=10')
         .then((res)=>{
            // console.log(res);
            if(res.data.msg=='操作成功'){
                this.PopularBrands=res.data.result
                // console.log(this.PopularBrands);
                this.$nextTick(()=>{//更新异步 在这里获取dom更新后的值
            this.Carousel();
       })
            }
           
         })
      
         axios //热门品牌
         .get('http://pcapi-xiaotuxian-front-devtest.itheima.net/home/goods')
         .then((res)=>{
            // console.log(res);
            if(res.data.msg=='操作成功'){
                 this.Home=res.data.result;
               
       
            }
           
         })

         axios
         .get('http://pcapi-xiaotuxian-front-devtest.itheima.net/home/special')
         .then((res)=>{
            // console.log(res);
            if(res.data.msg=='操作成功'){
                this.specialSubject=res.data.result;
                // console.log(this.specialSubject);
            }
           
         })
    },
    methods:{
        Carousel(){
            var mySwiper = new Swiper ('.swiper', {
    // direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    // pagination: {
    //   el: '.swiper-pagination',
    // },
   
slidesPerView : 5,
centeredSlides : true,

    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    // scrollbar: {
    //   el: '.swiper-scrollbar',
    // },
    
  })        
    },
   // scrollGood(){
           
      
        


    //        if(this.hotbool){
    //         var top =getElementTop(this.$refs.hot)
    //         // console.log(top);
    //         if(top<=window.innerHeight+ document.documentElement.scrollTop){
    //         this.brandBox=false
      
    // } 
    //     }
     
    //      if(this.brandbool){
    //         var brandTop=getElementTop(this.$refs.brand)
    //         // console.log(brandTop);
    //         if(brandTop<=window.innerHeight+ document.documentElement.scrollTop){
    //             this.brandbool=false
       
    // }
    //      }
        
       
           
      

    //       if(this.Homebool){
    //         // var HomeTop=getElementTop(this.$refs.Home)
    //     console.log(window.innerHeight+document.documentElement.scrollTop);
    //          if(2227<=window.innerHeight+ document.documentElement.scrollTop){
    //             // this.HomeTop=false
        
           
    //  }
    //       }
        
    
        
    
            
//     if(document.documentElement.scrollTop>=4800){
       
//     }
         
        
        
         
      
//    }
    }
}
</script>
<style scoped>
.App{
    width: 100%;
    height: 100%;
    background: #fff;
}
.home-panel{
 width: 100%;
 height: 541px;
 background: #fff;
}
.home-paneL{
    width: 100%;
    height: 460px;
    background: #f5f5f5;
    
}
.fresh{
    
    height: 115px;
   
    padding: 40px 0;
    display: flex;
    align-items: flex-end;
}
.commonwidth {
  /* 版心 */
  width: 1240px !important;
  margin-left: auto;
  margin-right: auto;
}
.fresh h3 span{
    font-size: 16px;
    color: #999;
    margin-left: 20px;
}
.fresh h3{
    flex: 1;
    font-size: 32px;
    font-weight: 400;
    margin-left: 6px;
    height: 35px;
    line-height: 35px;
}
.commoditybaby{
    height: 426px;
    /* background: blueviolet; */
}
.commoditybaby1{
    height: 426px;
}
.goods-list{
    display: flex;
    justify-content: space-between;
    height: 406px;
}
.goods-list li{
    width: 306px;
    height: 426px;
    background: #f0f9f4;
    transition: all .5s;
}
.goods-list li :hover{
     transform: translate3d(0,-3px,0);
    /* box-shadow: 0 3px 8px rgb(0 0 0 / 20%); */
}

.goods-list li img{
    width: 306px;
    height: 306px;
}
.goods-list li .nameEllipsis{
    font-size: 22px;
    padding: 12px 30px 0 30px;
    text-align: center;
}
.goods-list li .price{
    color: #cf4444;
   font-size: 24px;
    padding: 12px 30px 0 30px;
    text-align: center;
}
.come{
    text-decoration: none;
    color: #333;
    outline: none;
}
.desc{
    color: #999;
    font-size: 18px;
    text-align: center;
    margin-top: 15px;
}
.commoditybaby1 li{
    background: #fff;
}
.box{
    display: flex;
    width: 100%;
    height: 345px;
    overflow: hidden;
    padding-bottom: 40px;
 
}
.list{
   
    display: flex; 
    transition: all 1s;
    width: 100%;
    
}
.list .swiper-slide{
    /* margin-right: 10px; */
    /* width: 240px; */
    width: 20%;
    height: 305px;
    float: left;
}
.list  .swiper-slide img{
    width: 240px;
    height: 305px;
}

.list li{
    margin-right: 10px;
    width: 240px;
    height: 305px;
}
.list  li img{
    width: 240px;
    height: 305px;
} 
.swiper-button-next{
    
}

.swiper-button-prev{
 

  
}
.swiper-button-prev, .swiper-button-next {
    --swiper-navigation-size: 18px;
    /* //修改按钮大小 */
 width: 20px;
    height: 20px;
    background: #27ba9b; 
}
.swiper-button-prev::after, .swiper-button-next::after {
  color: #fff;
	/* //修改按钮颜色 */
}
.Home{
    width: 100%;
    height: 725px;
   
}
.home-product{
    background: #fff;
    height: 2900px;
}
.head{
    width: 100%;
    padding: 40px 0;
    display: flex;
    /* align-items: flex-end; */
    height: 115.4px;
}
.head h3{
    flex: 1;
    
    font-size: 32px;
    font-weight: 400;
    margin-left: 6px;
    height: 35px; 
    line-height: 35px;
}
.sub{
    width: 432px;
    height: 78.4px;
    margin-bottom: 2px;
   
}
.sub li{
    padding: 2px 12px;
    font-size: 16px;
    float: left;
}
.goodsbox{
    height: 610px;
    width: 100%;

}
.imgs{
    width: 240px;
    height: 610px;
    margin-right: 10px;
    position: relative;
    float: left;
    
}
.goods-lisT{
    width: 990px;
    display: flex; 
     flex-wrap: wrap; 
   
    height: 610px;
}
 .goods-li{
    width: 237px;
    /* width: 23%; */
  
  position: relative;
    height: 300px;
    margin-right: 10px;
    margin-bottom: 10px;
    /* margin:  0 5px; */
   
}
.goodsboxUl{
    width: 100%;
   
}
.imgs img{
    width: 100%;
    height: 100%;

}
.coment{
    width: 240px;
    height: 300px;
    padding: 10px 30px;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    transition: all .5s;
   
}
.namebox{
    position: absolute;
    top: 180px;
    width: 160px;
    text-overflow: ellipsis; /* 溢出显示省略号 */
    overflow: hidden; /* 溢出隐藏 */
    white-space: nowrap;  /* 强制不换行 */
}
.image{
    /* display: block; */
    width: 160px;
    height: 160px;
    margin: 0 auto;
}
.image img{
    width: 160px;
    height: 160px;
    /* margin-left: -20px; */
  
}
.name{
    margin-top: 6px;
    font-size: 16px;
}
.prices{
    margin-top: 10px;
    font-size: 20px;
    color: #cf4444;
}
.ellipsis{
    margin-top: 6px;
    font-size: 16px;
    text-overflow: ellipsis; /* 溢出显示省略号 */
    overflow: hidden; /* 溢出隐藏 */
    white-space: nowrap;  /* 强制不换行 */
}
.som{
    width: 205px;
    height: 66px;
    display: flex;
    /* font-size: 18px; */
    color: #fff;
    line-height: 66px;
    font-weight: 400;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate3d(0,-50%,0);
    
}
.som1{
    width: 76px;
    background: rgba(0,0,0,.9);
    text-align: center;
    font-size: 15px;
}
.som2{
    flex: 1;
    background: rgba(0,0,0,.7);
    font-size: 15px;
}
.home-footer{
 width: 100%;
 height: 495px;
 background: #f5f5f5;
}
.head-footer{
    width: 100%;
    height: 115px;
    padding: 40px 0;
    display: flex;
}

.head-footer h3{
    flex: 1;
    font-size: 32px;
    font-weight: 400;
    margin-left: 6px;
    height: 35px;
    line-height: 35px;
}
.head-footer span{
    font-size: 16px;
    vertical-align: middle;
    margin-right: 4px;
    color: #999;
}
.footerBox{
    height: 380px;
    padding-bottom: 20px;
    display: flex;
    /* justify-content: space-between; */
}
.special-item{
    width: 404px;
 
    transition: all .5s;
    height: 360px;
    float: left;
    margin: 0 4px;
    position: relative;

}
.src{
    display: block;
    width: 100%;
    height: 288px;
    position: relative;

}
.src img{
    width: 100%;
    height: 288px;
}
.meta{
    background-image: linear-gradient(
0deg,rgba(0,0,0,.8),transparent 50%);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 288px;
   
}
.title{
    position: absolute;
    bottom: 0;
    left: 0;
    padding-left: 16px;
    width: 70%;
    height: 70px;
}
.top{
    color: #fff;
    font-size: 22px;
    display: block;
    text-overflow: ellipsis; /* 溢出显示省略号 */
    overflow: hidden; /* 溢出隐藏 */
    white-space: nowrap;  /* 强制不换行 */
}
.subellipsis-top{
    display: block;
    font-size: 19px;
    color: #999;
    text-overflow: ellipsis; /* 溢出显示省略号 */
    overflow: hidden; /* 溢出隐藏 */
    white-space: nowrap;  /* 强制不换行 */
}
.pricebaanr{
    position: absolute;
    bottom: 25px;
    right: 16px;
    line-height: 1;
    padding: 4px 8px 4px 7px;
    color: #cf4444;
    font-size: 17px;
    background-color: #fff;
    border-radius: 2px;
}
.foot{
    height: 72px;
    line-height: 72px;
    padding: 0 20px;
    font-size: 16px;
    background: #fff;
}
.like{
    float: left;
    margin-right: 25px;
    vertical-align: middle;
}
.view{

}
.view{
    float: left;
    margin-right: 25px;
    vertical-align: middle
}
.reply{
    float: right;
    vertical-align: middle;
}
</style>